<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/web/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>map</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=9ad973109baca85826bf635c4d2a765d&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body onload="geocoder()">

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<input type="text" id="addre" value=""/>
<input type="text" id="addr" value=""/>
<button  data-toggle="modal" data-target="#myModal">
	维护坐标
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:500px;height:500px">
	<div id="container"></div>
	<div id="tip">
    	<input type="text" id="address" value=""/>
    	<input type="button" id="btn" value="查询"/>
    	<input type="button" data-dismiss="modal" value="确定"/>
    	<input type="text" id="asc" value=""/>
    </div>
</div>
<script type="text/javascript">
    var map = new AMap.Map("container", {
    	zoom:10,
        resizeEnable: true
    });
    var clickEventListener = map.on('click', function(e) {
        document.getElementById("asc").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        document.getElementById("addr").value=e.lnglat.getLng() + ',' + e.lnglat.getLat()
    });
    //var lng = $('asc');
    //map.on('click', getLnglat);
    //function getLnglat(e) {
    	//lng.value = "坐标" + e.lnglat.getLng() + ", " + e.lnglat.getLat();
     //   lngX.value = e.lnglat.getLng();
     //   latY.value = e.lnglat.getLat();
    //}
    var oBtn=document.getElementById("btn");
    oBtn.onclick=function(){
            var geocoder = new AMap.Geocoder({
               // city: "010", //城市，默认：“全国”
                radius: 1000 //范围，默认：500
            });
            //地理编码,返回地理编码结果
            geocoder.getLocation(document.getElementById("address").value, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    geocoder_CallBack(result);
                }
            });
        }
        function addMarker(i, d) {
            var marker = new AMap.Marker({
                map: map,
                position: [ d.location.getLng(),  d.location.getLat()]
            });
            var infoWindow = new AMap.InfoWindow({
                content: d.formattedAddress,
                offset: {x: 0, y: -30}
            });
            marker.on("click", function(e) {
                infoWindow.open(map, marker.getPosition());
            });
        }
        //地理编码返回结果展示
        function geocoder_CallBack(data) {
            var resultStr = "";
            //地理编码结果数组
            var geocode = data.geocodes;
            for (var i = 0; i < geocode.length; i++) {
                //拼接输出html
                resultStr += geocode[i].location.getLng() + ", " + geocode[i].location.getLat();
                addMarker(i, geocode[i]);
                map.setZoomAndCenter(14, [geocode[i].location.getLng(), geocode[i].location.getLat()]);
            }
            document.getElementById("asc").value= resultStr;
            document.getElementById("addr").value=resultStr;
        }
        $('#myModal').on('show.bs.modal', function () {
        	var v=$('#addre').val();
        	$("#address").val(v);
        	})
</script>
</body>
</html>